<template>
  <div>
    <sub-title :subTitle="'用户信息'" :isBack="back"></sub-title>
    <div class="body" v-loading="loading">
      <div class="flex info">
        <div class="flex h-center">
          <img class="avatar" :src="getGoodImg(data.user.remark2)" alt="头像">
        </div>
        <div class="flex-1">
          <div class="flex">
            <div>用户ID</div>
            <div>{{ data.user.id }}</div>
          </div>
          <div class="flex">
            <div>昵称</div>
            <div>{{ data.user.realName }}</div>
          </div>
          <div class="flex">
            <div>性别</div>
            <div>{{ data.user.sex | getSex }}</div>
          </div>
          <div class="flex">
            <div>生日</div>
            <div>{{ data.user.birthday }}</div>
          </div>
          <div class="flex">
            <div>城市</div>
            <div>{{ data.user.remark5 }}</div>
          </div>
        </div>
        <div class="flex-1">
          <div class="flex">
            <div>职业</div>
            <div>无</div>
          </div>
          <div class="flex">
            <div>个性签名</div>
            <div>无</div>
          </div>
          <div class="flex">
            <div>喜欢的分类</div>
            <div>无</div>
          </div>
          <div class="flex">
            <div>注册时间</div>
            <div>{{ data.user.createTime }}</div>
          </div>
          <div class="flex">
            <div>用户来源</div>
            <div>小程序</div>
          </div>
        </div>
      </div>
      <div class="statistics flex">
        <p class="title">统计信息</p>
        <div>
          <div>消费金额</div>
          <div>{{ data.consumption || 0 }}</div>
        </div>
        <div>
          <div>订单数量</div>
          <div>{{ data.order_count }}</div>
        </div>
        <div>
          <div>收藏商品</div>
          <div>{{ data.collection }}</div>
        </div>
        <div>
          <div>商品评价</div>
          <div>{{ data.evaluation }}</div>
        </div>
        <div>
          <div>退货记录</div>
          <div>{{ data.return_record }}</div>
        </div>
        <div>
          <div>登录次数</div>
          <div>{{ data.login_count }}</div>
        </div>
      </div>
      <p class="address-title">收货地址</p>
      <el-table class="mall-table" :data="data.addressList" :header-cell-style="headerStyle" :cell-style="tdStyle">
        <el-table-column label="姓名">
          <template slot-scope="scope">{{ scope.row.userName }}</template>
        </el-table-column>
        <el-table-column label="手机号" width="140">
          <template slot-scope="scope">{{ scope.row.phone }}</template>
        </el-table-column>
        <el-table-column label="详细地址">
          <template slot-scope="scope">{{ scope.row.address }}</template>
        </el-table-column>
        <el-table-column label="邮政编码" width="140">
          <template slot-scope="scope">{{ scope.row.postalCode }}</template>
        </el-table-column>
        <el-table-column label="默认地址" width="140">
          <template slot-scope="scope">
            <el-switch disabled v-model="scope.row.defaultState" :active-value="1" :inactive-value="2" active-color="#5BC0BF" inactive-color="#ff4949"></el-switch>
          </template>
        </el-table-column>
      </el-table>
      <p class="address-title" style="margin-top: 30px;">订单记录</p>
      <el-table class="mall-table" :data="list" :header-cell-style="headerStyle" :cell-style="tdStyle">
        <el-table-column label="订单编号">
          <template slot-scope="scope">{{ scope.row.code }}</template>
        </el-table-column>
        <el-table-column label="提交时间" width="140">
          <template slot-scope="scope">{{ scope.row.creatTime }}</template>
        </el-table-column>
        <el-table-column label="用户账号">
          <template slot-scope="scope">{{ scope.row.mobilePhone }}</template>
        </el-table-column>
        <el-table-column label="订单金额" width="140">
          <template slot-scope="scope">{{ scope.row.totalMoeny }}</template>
        </el-table-column>
        <el-table-column label="支付方式" width="140">
          <template slot-scope="scope">
            <span>微信</span>
          </template>
        </el-table-column>
        <el-table-column label="订单来源" width="140">
          <template slot-scope="scope">
            <span>小程序</span>
          </template>
        </el-table-column>
        <el-table-column label="订单状态" width="140">
          <template slot-scope="scope">
            <span>{{ scope.row.status | getOrderStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140">
          <template slot-scope="scope">
            <span class="table-btn" @click="$router.push('/order/list/orderDetail?id=' + scope.row.id)">查看订单</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination @next="next" :isBatch="false" :total="total" :pageSize="pageSize"></pagination>
    </div>
  </div>
</template>

<script>
  import subTitle from "@/components/subTitle"
  import pagination from "@/components/pagination"
  import filters from "@/utils/filters"
  import mixin from "@/utils/mixin"
  export default {
    name: "userInfo",
    filters: filters,
    mixins: [mixin],
    components: {
      subTitle,
      pagination
    },
    data(){
      return {
        data: {
          user: {}
        },
      }
    },
    mounted(){
      this.getDetail();
      this.getList();
    },
    methods: {
      getDetail(){
        this.$http.post("user_detail/query/" + this.$route.params.id,
        ).then((res) => {
          this.data = res;
        }, (err) => {
          this.$msgErr(err.msg);
        });
      },
      getList(){
        this.loading = true;
        this.$http.post("merchant_order/query_for_page", {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          merchantId: JSON.parse(localStorage.getItem('userInfo')).merchantId,
          userId: this.$route.params.id
        }).then((res) => {
          this.list = res.list;
          this.total = res.totalCount;
        }, (err) => {
          this.$msgErr(err.msg);
        }).finally(() => {
          this.loading = false;
        });
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "~@/assets/css/common";
  .avatar{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 50px;
  }
  .info{
    border: $border;
    >div{
      border-right: $border;
      &:last-child{
        border-right: none;
      }
      >div{
        line-height: 36px;
        font-size: 14px;
        border-bottom: $border;
        >div{
          padding: 0 10px;
          &:first-child{
            width: 30%;
            color: $gray;
            background-color: #F6F6F6;
            border-right: $border;
          }
        }
        &:last-child{
          border-bottom: none;
        }
      }
    }
  }
  .statistics{
    margin: 30px 0;
    border: $border;
    .title{
      width: 100%;
      border-bottom: $border;
      line-height: 40px;
      font-weight: bold;
      padding-left: 20px;
      box-sizing: border-box;
      background-color: #EFEFEF;
    }
    >div{
      flex: 1;
      border-right: $border;
      &:last-child{
        border-right: none;
      }
      >div{
        line-height: 49px;
        font-size: 15px;
        text-align: center;
        &:first-child{
          line-height: 49px;
          color: $gray;
          font-weight: 700;
          background-color: #F6F6F6;
          border-bottom: $border;
        }
      }
    }
  }
  .address-title{
    width: 100%;
    border: $border;
    border-bottom: none;
    line-height: 40px;
    font-weight: bold;
    padding-left: 20px;
    box-sizing: border-box;
    background-color: #EFEFEF;
  }
</style>